<template>
  <div class="clearfix">
    <mu-card-text></mu-card-text>
    <mu-text-field
      class="comment-input"
      placeholder="说点什么..."
      v-model="content"
      multi-line
      :rows="4"
      full-width
    ></mu-text-field>
    <mu-button class="comment-btn" color="primary" @click="submit"
      >评论</mu-button
    >
    <mu-dialog
      title="提示"
      width="600"
      :open.sync="openAlert"
      :esc-press-close="false"
    >
      评论内容需要审核,大约需要24小时。你确定需要继续操作吗？
      <mu-button slot="actions" flat color="primary" @click="ok(false)"
        >取消</mu-button
      >
      <mu-button slot="actions" flat color="primary" @click="ok(true)"
        >确定</mu-button
      >
    </mu-dialog>
  </div>
</template>
<script>
export default {
  props: {
    commentSuccess: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      content: '',
      openAlert: false
    }
  },
  methods: {
    submit () {
      if (this.content) {
        this.openAlert = true
      } else {
        this.$toast.info('请输入评论内容')
      }
    },
    ok (bool) {
      if (bool) {
        this.$emit('comment', {
          content: this.content
        })
      } else {
        this.openAlert = false
        this.content = ""
      }
    }
  },
  watch: {
    commentSuccess (val) {
      if (val) {
        this.openAlert = false
        this.content = ""
      }
    }
  }
}
</script>
<style lang="less" scoped>
.comment-input {
  padding: 0 0.42667rem;
}
.comment-btn {
  float: right;
  margin: 0 0.42667rem 0.42667rem 0;
}
</style>

